<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <style type="text/css">
    #eachart{
        width: 800px;
        height: 500px;
        margin:20px auto;

    }
    </style>
</head>
<body>
    <div id="eachart"></div>
    <script type="text/javascript">


    String.prototype.hashCode = function() {
  //如果已经缓存了结果，直接返回
    if(this.hashcode!==undefined){
        return this.hashcode
    }
    let hashcode = 0
    for(let i=0;i<this.length;i++){
      //溢出需要每次运算后立即处理，否则可能超过js数值的表示范围。
        hashcode = hashcode*31+this.charCodeAt(i)
        hashcode &= 0xffffffff
    }
    this.hashcode = hashcode
    return hashcode
}


        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('eachart')),timer = null,day = 0;

        

        g_data_country = [
                          ['日本', '印尼', '美国', '印度', '中国', '德国', '法国', '世界人口(万)'],
                          ['日本', '印尼', '巴基斯坦', '中国', '德国', '印度', '泰国','世界人口(万)']
                          
                          ]
        g_data_num = [
                        [18203, 23489, 29034, 104970, 131744, 3434, 630230, 23450],
                        [234890, 104970, 29034, 10470, 11744, 3434, 330230, 9847]
                      ]

        g_data = [
                    ['2010', [['中国', 1000], ['美国', 900], ['日本', 400] , ['德国', 700], ['意大利', 490]] ], 
                    ['2011', [['中国', 800], ['美国', 400], ['日本', 500], ['德国', 900], ['意大利', 690]] ], 
                ]
        
        //设置图标配置项
        option = {
          textStyle: {//数值样式
                        fontSize: '15px',
                        fontWeight: 'bolder',
                        color: '#555'
                    },
          title: {
            text: '世界人口总量',
            subtext: '数据来自网络'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'shadow'
            }
          },
          // legend: {
          //   data: ['2011年']
          // },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            show:false,
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            // data: g_data_country[0]
                    axisTick: {
                   show: false
               }, 
            //    axisLabel: {
            //     interval:0,//代表显示所有x轴标签显示
            //     rotate:45, //代表逆时针旋转45度
            // }
            axisLine:{                 //坐标 轴线
            show:false,             //是否显示坐标轴轴线
            // onZero:true,           //X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效
            // lineStyle:mylineStyle
            },
          },
          series: [
          {
            name: '2011年',
            type: 'bar',
            // data: g_data_num
            itemStyle:{
                    normal:{
                        //柱体的颜色
                        //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                        color: function(params){
                            console.log(params);
                            var colorList = [
                        ['#0F5C7F','#99DFFF'],
                        ['#8D3510','#FFA783'],
                        ['#651180','#D099FF'],
                        ['#4B8D10','#83FFC0'],
                        ['#8D104B','#FF83D8'],
                        ['#7F610F','#FFE899'],
                        ['#108D89','#83FFE9']
                      ];
                            // var colorItem = colorList[params.dataIndex];
                            var colorItem = colorList[params.name.hashCode() % 7];
                            return new echarts.graphic.LinearGradient(1,0,0,0,[
                                        {
                                            offset:0,
                                            color: colorItem[0]
                                        },
                                        {
                                            offset:1,
                                            color: colorItem[1]
                                        }
                                        ],false);
                            },

                            barBorderRadius: 7 //圆角
                        }
                        
              },
              label: { //柱体上显示数值
                    show: true,//开启显示
                    position: 'right',//在上方显示,inside
                    
                    formatter: '{c}',
                }
          },
          ]
        };
        

        myChart.setOption(option)

        function refreshData(data, data2, crt_name){
          if(!myChart){
            return;
          }
          var option = myChart.getOption();
          option.series[0].data = data;
          option.yAxis[0].data = data2;
          option.title[0].subtext = crt_name;

          console.log(crt_name);
          myChart.setOption(option);
        }


        var idx = 0
        clearInterval(timer)
        timer = setInterval(function(){
            idx = (idx+1)%2
            //addData(true);
            //myChart.setOption(option);

            var tn = g_data[idx][0]


            var sorted = g_data[idx][1].sort(function(a,b){
              return a[1]-b[1] //a-b为升序
              //return b-a  //b-a为降序
            })

            var gs = new Array()
            var vs = new Array()

            function getv(ls){

              for(var i=0;i<ls.length;i++){
                vs.push(ls[i][1])
                gs.push(ls[i][0])
              }
            }

            getv(sorted)

            console.log(vs)
            console.log(gs)


            refreshData(vs, gs, tn)

        },1250)

    </script>
</body>
</html>